<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯JS版待办事项程序</title>
    <style>
        
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .todo-app {
            width: 100%;
            max-width: 600px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .todo-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .todo-header h1 {
            color: #6a5acd;
        }
        .todo-header p {
            color: #999;
            font-size: 14px;
        }
        .todo-input-area {
            display: flex;
            margin-bottom: 20px;
        }
        .todo-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
        }
        .todo-add-btn {
            padding: 0 20px;
            background-color: #6a5acd;
            color: #fff;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        .todo-filters {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .filter-btn {
            padding: 5px 10px;
            margin: 0 5px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: #fff;
            cursor: pointer;
        }
        .filter-btn.active {
            background-color: #6a5acd;
            color: #fff;
            border-color: #6a5acd;
        }
        .todo-list {
            list-style: none;
            margin-bottom: 20px;
        }
        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            animation: fadeIn 0.3s ease-in;
        }
        .todo-item:last-child {
            border-bottom: none;
        }
        .todo-check {
            margin-right: 10px;
        }
        .todo-text {
            flex: 1;
        }
        .todo-text.completed {
            text-decoration: line-through;
            color: #999;
        }
        .todo-delete {
            color: #ff6347;
            cursor: pointer;
            font-size: 18px;
        }
        .todo-footer {
            text-align: center;
            padding: 10px 0;
            color: #999;
            font-size: 14px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 400px) {
            .todo-input-area {
                flex-direction: column;
            }
            .todo-input {
                border-radius: 4px;
                margin-bottom: 10px;
            }
            .todo-add-btn {
                border-radius: 4px;
            }
            .todo-filters {
                flex-wrap: wrap;
            }
            .filter-btn {
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="todo-app">
        <div class="todo-header">
            <h1>待办事项</h1>
            <p>简单高效地管理你的任务</p>
        </div>
        <div class="todo-input-area">
            <input type="text" class="todo-input" placeholder="请输入你的待办事项...">
            <button class="todo-add-btn">+ 添加</button>
        </div>
        <div class="todo-filters">
            <button class="filter-btn active" data-filter="all">全部</button>
            <button class="filter-btn" data-filter="active">未完成</button>
            <button class="filter-btn" data-filter="completed">已完成</button>
        </div>
        <ul class="todo-list"></ul>
        <div class="todo-footer">
            <span class="todo-count">0 个未完成，0 个总计</span>
        </div>
    </div>

    <script>
        // 待办事项类
        class Todo {
            constructor(id, text, completed) {
                this.id = id;
                this.text = text;
                this.completed = completed;
            }
        }

        // 全局变量
        const todoInput = document.querySelector('.todo-input');
        const todoAddBtn = document.querySelector('.todo-add-btn');
        const todoList = document.querySelector('.todo-list');
        const filterBtns = document.querySelectorAll('.filter-btn');
        const todoCount = document.querySelector('.todo-count');
        let todos = JSON.parse(localStorage.getItem('todos')) || [];
        let currentFilter = 'all';

        // 渲染待办事项
        function renderTodos() {
            todoList.innerHTML = '';
            let filteredTodos = todos;
            if (currentFilter === 'active') {
                filteredTodos = todos.filter(todo => !todo.completed);
            } else if (currentFilter === 'completed') {
                filteredTodos = todos.filter(todo => todo.completed);
            }
            filteredTodos.forEach(todo => {
                const todoItem = document.createElement('li');
                todoItem.className = 'todo-item';
                todoItem.innerHTML = `
                    <input type="checkbox" class="todo-check" ${todo.completed ? 'checked' : ''}>
                    <span class="todo-text ${todo.completed ? 'completed' : ''}">${todo.text}</span>
                    <span class="todo-delete">×</span>
                `;
                todoItem.dataset.id = todo.id;
                todoList.appendChild(todoItem);
            });
            updateCount();
            saveToLocalStorage();
        }

        // 更新统计信息
        function updateCount() {
            const activeCount = todos.filter(todo => !todo.completed).length;
            const totalCount = todos.length;
            todoCount.textContent = `${activeCount} 个未完成，${totalCount} 个总计`;
        }

        // 保存到本地存储
        function saveToLocalStorage() {
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        // 添加待办事项
        function addTodo(text) {
            if (!text.trim()) return;
            const newTodo = new Todo(Date.now(), text, false);
            todos.push(newTodo);
            renderTodos();
            todoInput.value = '';
        }

        // 事件监听
        todoAddBtn.addEventListener('click', () => {
            addTodo(todoInput.value);
        });

        todoInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                addTodo(todoInput.value);
            }
        });

        todoList.addEventListener('click', (e) => {
            const target = e.target;
            const todoItem = target.closest('.todo-item');
            if (!todoItem) return;
            const id = parseInt(todoItem.dataset.id);
            const index = todos.findIndex(todo => todo.id === id);
            if (target.classList.contains('todo-check')) {
                todos[index].completed = target.checked;
                renderTodos();
            } else if (target.classList.contains('todo-delete')) {
                todos.splice(index, 1);
                renderTodos();
            }
        });

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentFilter = btn.dataset.filter;
                renderTodos();
            });
        });

        // 初始化渲染
        renderTodos();
    </script>
</body>
</html>